
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport"content="width=device-width;" >
            <title></title>
            <link rel="stylesheet" type="text/css" href="css/main.css" />
            
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/highcharts.js"></script>
            <script type="text/javascript" src="js/exporting.js"></script>
            <script type="text/javascript">
                
                
                Highcharts.theme = {
                    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                    chart: {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                            stops: [
                                    [0, 'rgb(255, 255, 255)'],
                                    [1, 'rgb(240, 240, 255)']
                                    ]
                        },
                        borderWidth: 1,
                        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                        plotShadow: true,
                        plotBorderWidth: 1
                    },
                    title: {
                        style: {
                            color: '#000',
                            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                        }
                    },
                    subtitle: {
                        style: {
                            color: '#666666',
                            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                        }
                    },
                    xAxis: {
                        gridLineWidth: 1,
                        step:60,
                        lineColor: '#000',
                        tickColor: '#000',
                        labels: {
                            style: {
                                color: '#000',
                                font: '11px Trebuchet MS, Verdana, sans-serif'
                            }
                        },
                        title: {
                            style: {
                                color: '#333',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                                
                            }
                        }
                    },
                    yAxis: {
                        minorTickInterval: 'auto',
                        lineColor: '#000',
                        lineWidth: 1,
                        tickWidth: 1,
                        tickColor: '#000',
                        labels: {
                            style: {
                                color: '#000',
                                font: '11px Trebuchet MS, Verdana, sans-serif'
                            }
                        },
                        title: {
                            style: {
                                color: '#333',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                            }
                        }
                    },
                    legend: {
                        itemStyle: {
                            font: '9pt Trebuchet MS, Verdana, sans-serif',
                            color: 'black'
                            
                        },
                        itemHoverStyle: {
                            color: '#039'
                        },
                        itemHiddenStyle: {
                            color: 'gray'
                        }
                    },
                    labels: {
                        style: {
                            color: '#99b'
                        }
                    },
                    
                    navigation: {
                        buttonOptions: {
                            theme: {
                                stroke: '#CCCCCC'
                            }
                        }
                    }
                };
                
                var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
                
                Highcharts.setOptions({
                                      global: {
                                      useUTC: true
                                      }
                                      });
                
                
                function updateData(x,y,i)
                {
                    
                    var series = chart.series[0];
                    
                    
                    series.addPoint([x, y], false, false);
                    
                    if(i == 1){
                        
                        //chart.xAxis[0].options.labels.step = 24*60*60*1000;
                        chart.xAxis[0].options.labels.type = 'datetime';
                        
                        chart.xAxis[0].redraw;
                        chart.redraw();
                    }
                    
                    
                }
                
                
                var chart;
                $(function() {
                  
                  chart = new Highcharts.Chart({
                                               chart: {
                                               renderTo: 'chart_spline', //图表放置的容器，DIV
                                               defaultSeriesType: 'spline', //图表类型为曲线图
                                               zoomType: 'x',
                                               width: 1350,
                                               //height:300
                                               
                                               },
                                               
                                               plotOptions: {
                                               spline: {
                                               lineWidth: 1.5,
                                               fillOpacity: 0.1,
                                               marker: {
                                               enabled: false,
                                               states: {
                                               hover: {
                                               enabled: false,
                                               radius: 2
                                               }
                                               }
                                               },
                                               shadow: false
                                               }
                                               },
                                               title: {
                                               text: '尿蛋白含量图'  //图表标题
                                               },
                                               
                                               
                                               xAxis: { //设置X轴
                                               type: 'datetime',  //X轴为日期时间类型
                                               //tickInterval: 1000,
                                               tickPixelInterval: 50 ,//X轴标签间隔
                                               labels: {
                                               formatter: function() {
                                               
                                               return  Highcharts.dateFormat('%m-%d', this.value);
                                               }
                                               }

                                               },
                                               yAxis: { //设置Y轴
                                               title: '',
                                               max: 200, //Y轴最大值
                                               min: 0 , //Y轴最小值
                                               minorTickInterval: 10,//最小刻度
                                               tickPixelInterval:20//刻度间隔
                                               
                                               },
                                               tooltip: {//当鼠标悬置数据点时的提示框
                                               formatter: function() { //格式化提示信息
                                               return '<b>尿蛋白</b><br/>'+
                                               Highcharts.dateFormat('%M:%D', this.x) +'<br/>'+
                                               Highcharts.numberFormat(this.y, 2)+'℃';
                                               }
                                               },
                                               legend: {
                                               enabled: false  //设置图例不可见
                                               },
                                               exporting: {
                                               enabled: false  //设置导出按钮不可用
                                               },
                                               credits: {
                                               text: '', //设置LOGO区文字
                                               href: '' //设置LOGO链接地址
                                               },
                                               series: [{
                                                        data: (function() { //设置默认数据，这里是假数据，如果有真数据可以在页面加载时候用真数据替换掉
                                                               var data = [],
                                                               time = (new Date()).getTime(),
                                                               i;
                                                               
                                                               for (i = -19; i <= -17; i++) {
                                                               data.push({
                                                                         x: time + i * 1000,
                                                                         y: 50
                                                                         });
                                                               }
                                                               return data;
                                                               })()
                                                        }]
                                               });
                  });
                </script>
            </head>
    
    <body>
        
        <div id="main">
            <h2 class="top_title">尿蛋白含量图</h2>
            
            <div id="chart_spline" ></div>
        </div>
    </body>
</html>
